<template>
  <view class="page-new-friend">
    <view>
    	<u-navbar back-text="返回">
      </u-navbar>
    </view>
    
    <view v-for="(item, index) in newFriendList" class="menu-wrap">
      <text class="iconfont icontianjiapengyoutubiao icon"></text>
      <view class="text">
        <view><text class="t-name">{{item.nick}}</text></view>
        <view><text class="t-ps">{{item.ps}}</text></view>
      </view>
      <button type="default" plain="true" size="mini" class="btn-apply" @click="apply(index)">接受</button>
    </view>
  </view>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    components: {
    },
  	data() {
  		return {
        scrollTop: 0,
  		}
  	},
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    mounted() {
    },
    computed: {
      ...mapState({
        newFriendList: (state) => {
          return state.app.newFriendList
        }
      })
    },
  	methods: {
      // ...mapActions({
      //   passFriendApply: 'newFriend/passFriendApply'
      // }),
	  apply(index) {
		  
        this.$store.dispatch('app/passFriendApply', index);
      }
  	}
  }
</script>

<style scoped>
  .icon {
    font-size: 100rpx;
    color: #F29100;
    border-radius: 10rpx;
  }
  .menu-wrap {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
  }
  .text {
    flex: 1;
  }
  .t-name {
    font-size: 32rpx;
    margin-left: 20rpx;
    color: #000000;
  }
  .t-ps {
    margin-left: 20rpx;
  }
  .page-new-friend .btn-apply {
    color: #18B566;
    border: 0rpx;
    background: #eee;
  }
</style>
